'use client';
import React, { useEffect, useState } from 'react';
import styles from './index.module.scss';

const BlurReveal = ({ children, delay = 0, duration = 800 ,width}) => {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShow(true);
    }, delay);

    return () => clearTimeout(timer);
  }, [delay]);

  if (!show) return null;

  return (
    <div 
      className={styles.blurReveal}
      style={{ '--duration': `${duration}ms`,width:`${width}` }}
    >
      {children}
    </div>
  );
};

export default BlurReveal; 